<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div class="dd">
    <h3>计算属性(只读)</h3>
    姓: {{name1}} <br>名: {{name2}} <br>全名： {{myName}}<br>
    <h3>计算属性(可读写)</h3>
    姓:{{name1}} <br>名: {{name2}} <br>全名: {{myName1}}<br>
    <input v-model="myName1">

    <h3>watch 属性值监听</h3>
    <input v-model="number" type="number">
</div>

<script>
    var v = new Vue({
        el: ".dd",
        data: {
            name1: "张",
            name2: "三",
            number: 100
        },
        // 计算属性节点
        computed: {
            // 属性名 =》 属性值，函数返回值就是属性值
            myName() {
                return this.name1 + this.name2;
            },
            myName1: {
                //取值
                get() {
                    return this.name1 + this.name2;
                },
                //设值
                // 属性监听
                set(newValue) {
                    //暂时不考虑 复姓
                    this.name1 = newVlue.substring(0, 1);
                    this.name2 = newVlue.substring(1);
                }
            }
        },
        // watch 用于属性值变化监听
        watch: {
            number(newValue, oldValue) {
                console.info(newValue, oldValue);
                this.name1 += newValue;
            }
        }

    });
</script>
</body>
</html>